﻿/****************************************************
Cscroll

対応ブラウザ
・Safari
・Chrome
・IE
・Firefox（※ただし、テキスト選択無効が効かない）
・iPad（※ただし、テキスト選択無効が効かない。CSSで対応すること）

1)スクロール用のdivを用意する
	・スクロールの場合はスタイルでoverflow:scroll;を指定すること。
	・ウインドウの場合はスタイルでposition:absolute;を指定すること。

2)メンバ変数でCscrollをnewする
	・第一引数：スクロール対象divのid名

3)onloadで設定を行う
	・クラス名.isKey=true;　でShiftキーを押している間のみ動作
	・クラス名.isWindow=true;　でウインドウ動作

4)onloadでinit()を呼び出す
	・必ず、onloadイベント以降に実行すること。
****************************************************/

/****************************************************
update

10:12 2011/06/28	AI	新規作成
16:31 2011/07/13	AI	テキスト選択を無効	#001
09:12 2011/10/12	AI	クロスブラウザ対応	#002
17:45 2011/12/06	AI	キーイベントに対応	#003
11:24 2011/12/13	AI	オブジェクト化	全体
12:23 2011/12/13	AI	ウインドウ動作に対応	#005
17:59 2011/12/13	AI	IEの異常動作を修正	#006
****************************************************/
var Cscroll = function(divId,tmp) {
	this.divId=divId;
	this.frameObj=null;
	this.clientType="";
//#003-2S
	this.isKey=false;
//#003-2E
//#005-1S
	this.isWindow=false;
//#005-1E
	this.pX=0;
	this.pY=0;
	//alert("this.pY:" + this.pY);
	this.mouseDownFlag=false;
	this.clsObj=this;
	this.init = function(){
		this.frameObj = document.getElementById(this.divId);
		if(this.frameObj!=null){
			var cls = this.clsObj;
			//#002-1S
			var strUA = navigator.userAgent.toLowerCase();
			if(strUA.indexOf("msie") != -1){
				this.frameObj.attachEvent("onmousedown", function(event) { cls.mouseDownListner(event); }, false);
				this.frameObj.attachEvent("onmousemove", function(event) { cls.mouseMoveListner(event); }, false);
				this.frameObj.attachEvent("onmouseup", function(event) { cls.mouseUpListner(event); }, false);
				//#006-1S
				this.frameObj.attachEvent("onmouseleave", function(event) { cls.mouseOutListner(event); }, false);
				//#006-1E
				//#001-1S
				this.frameObj.attachEvent("onselectstart", function(event) { cls.selectStartListner(event); }, false);
				//#001-1E
				//#002-3S
				this.clientType="ie";
				//#002-3E
			}else if(strUA.indexOf("ipad") != -1){

				if(tmp == "0"){
					this.frameObj.addEventListener("touchstart", function(event) { cls.mouseDownListner(event); }, false);
					this.frameObj.addEventListener("touchmove", function(event) { cls.mouseMoveListner(event); }, false);
					window.addEventListener("touchend", function(event) { cls.mouseUpListner(event); }, false);
				}
				//#002-3S
				this.clientType="ipad";
				//#002-3E
			}else{
				this.frameObj.addEventListener("mousedown", function(event) { cls.mouseDownListner(event); }, false);
				this.frameObj.addEventListener("mousemove", function(event) { cls.mouseMoveListner(event); }, false);
				window.addEventListener("mouseup", function(event) { cls.mouseUpListner(event); }, false);
				//#001-1S
				this.frameObj.addEventListener("selectstart", function(event) { cls.selectStartListner(event); }, false);
				//#001-1E
				//#002-3S
				this.clientType="etc";
				//#002-3E
			}
			//#002-1E

		}
	};
	this.remove = function(eventTarget, eventType, eventListener){

		//alert("sss");
	    if(eventTarget.removeEventListener){
	    	//alert("sssa111");
	        eventTarget.removeEventListener(eventType, eventListener, false);
	    }else if(eventTarget.detachEvent){
	    	//alert("sssa22");
	        eventTarget.detachEvent("on"+eventType, eventListener);
	    }

	}
	this.mouseDownListner = function(e){
		//#003-3S
		if(this.getIsKey()){
			return false;
		}
		//#003-3E
		//#005-2S
		if(this.isWindow){
			this.pX=this.getCoordinateX(e)-this.frameObj.offsetLeft;
			this.pY=this.getCoordinateY(e)-this.frameObj.offsetTop;
		}else{
			this.pX=this.getCoordinateX(e);
			this.pY=this.getCoordinateY(e);
			//alert("down_py:" + this.pY);
		}
		//#005-2E
		this.mouseDownFlag=true;
	};
	this.mouseMoveListner = function(e){
		if(this.mouseDownFlag){
			//#003-7E
			if(this.getIsKey()){
				this.mouseDownFlag=false;
				return false;
			}
			//#003-7E
			if(this.clientType=="ipad"){
				//alert("aaaa");
				e.preventDefault();
			}
			try{
				var cX=this.getCoordinateX(e);
				var cY=this.getCoordinateY(e);
//				this.frameObj.scrollTop = 0;

				//alert("this.cY::" + cY);
				//#005-3S
				if(this.isWindow){
					this.frameObj.style.top=cY-this.pY+"px";
					this.frameObj.style.left=cX-this.pX+"px";
				}else{
					this.frameObj.scrollLeft=this.frameObj.scrollLeft+(this.pX-cX);
					this.frameObj.scrollTop= this.frameObj.scrollTop+(this.pY-cY) ;

					this.pX=cX;
					this.pY=cY;
					//alert("this.cY::" + cY);
					//alert("scrollTop:"+this.frameObj.scrollTop);
				}
				//#005-3E
			}catch(ex){
			}
		}
	};
	this.mouseUpListner = function(e){
		this.mouseDownFlag=false;
	};
	//#006-2S
	this.mouseOutListner = function(e){
		this.mouseDownFlag=false;
	};
	//#006-2E
	//#001-2S
	this.selectStartListner = function(e){
		//#003-5S
		if(!this.getIsKey()){
			e.returnValue = false;
		}
		//#003-5E
	};
	//#001-2E
	//#002-4S
	this.getCoordinateX = function(e){
		if(this.clientType=="ipad"){
			return e.touches[0].clientX;
		}else{
			return e.clientX;
		}
	};
	//#002-4E
	//#002-5S
	this.getCoordinateY = function(e){
		if(this.clientType=="ipad"){
			return e.touches[0].clientY;
		}else{
			return e.clientY;
		}
	};
	//#002-5E
	//#003-6S
	this.getIsKey = function(){
		if(this.isKey && !window.event.shiftKey){
			return true;
		}else{
			return false;
		}
	};
	//#003-6E
}
